﻿<link href="~/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.loading.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/messager/jeasyui.extensions.messager.progress.js"></script>

<link href="~/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.iframe.js"></script>

<script src="~/Scripts/jquery-easyui-extensions/tabs/jeasyui.extensions.tabs.operateTab.js"></script>

<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false,title:'北部'" style="height:180px;border-bottom-width:1px;padding:25px;">
        <a id="btnRefreshTab" class="easyui-linkbutton" data-options="iconCls:'icon-add'">刷新标签页1</a>
        <a id="btnLoading" class="easyui-linkbutton" data-options="iconCls:'icon-add'">打开标签页1的遮罩层</a>
        <a id="btnLoaded" class="easyui-linkbutton" data-options="iconCls:'icon-add'">关闭标签页1的遮罩层</a>
        <a id="btnAddTab" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加新的标签页</a>
        <a id="btnInserTab" class="easyui-linkbutton" data-options="iconCls:'icon-add'">在标签页1之后插入新的标签页</a>
        <a id="btnMoveTab" class="easyui-linkbutton" data-options="iconCls:'icon-add'">把标签页1移动到标签页2之后</a>
        <br /><br />
        自动嵌套iframe的标签页，其核心扩展由 jeasyui.extensions.panel.iframe.js 实现。因此要使 iniframe 属性生效，请引用相应的 js 及 css。
        <br />
        jeasyui.extensions.panel.iframe.js  jeasyui.extensions.panel.css
    </div>
    <div data-options="region:'center',border:false,title:'中间'">
        <div id="tabs1" class="easyui-tabs" data-options="fit:true,border:false">
            <div data-options="title:'标签页1',closable:false,selected:true,iconCls:'icon-add',href:'/Blank/EasyuiPanelPage'" style="padding:15px;">
            </div>
            <div data-options="title:'标签页2',closable:true,iconCls:'icon-edit'" style="padding:15px;">
                标签页2
            </div>
            <div data-options="title:'自动嵌套iframe的标签页',closable:true,iconCls:'icon-edit',iniframe:true,href:'/Blank/EasyuiIndex'" style="padding:15px;">
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("#btnRefreshTab").click(function () {
            $("#tabs1").tabs("refresh", "标签页1");
        });

        $("#btnLoading").click(function () {
            $("#tabs1").tabs("loading");
        });

        $("#btnLoaded").click(function () {
            $("#tabs1").tabs("loaded");
        });

        $("#btnAddTab").click(function () {
            var title = "新的标签页", exist = $("#tabs1").tabs("exists", title);
            if (exist) { return; }
            $("#tabs1").tabs("add", {
                title: title,
                selected: false,
                closable: true,
                href: "/Blank/EasyuiPanelPage"
            });
        });

        $("#btnInserTab").click(function () {
            var title = "插入新的标签页", exist = $("#tabs1").tabs("exists", title);
            if (exist) { return; }
            $("#tabs1").tabs("insert", {
                options: {
                    title: title,
                    selected: false,
                    closable: true,
                    href: "/Blank/EasyuiPanelPage"
                },
                which: "标签页1",
                point: "after"
            });
        });

        $("#btnMoveTab").click(function () {
            $("#tabs1").tabs("move", {
                target: "标签页2",
                source: "标签页1",
                point: "after"
            });
        });
    });
</script>